<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>语义化标签</title>
  <style>
      * {
          margin: 0;
          padding: 0;
          text-align: center;
          font-size: 40px;
      }

      .w {
          /*版心*/
          width: 1200px;
          margin: 0 auto;
      }

      header {
          height: 60px;
          background-color: #bfa;
      }

      nav {
          height: 50px;
          background-color: lightgrey;
          text-align: center;
          line-height: 50px;
          position: sticky;
          top: 0;
      }

      nav li {
          list-style: none;
          float: left;
          padding: 0 20px;
      }

      nav li:hover {
          background-color: #bfa;
      }

      nav li a {
          color: white;
          text-decoration: none;
          font-size: 18px;
          display: block;
          height: 50px;
      }

      nav li a:hover {
          color: red;
      }

      main {
          height: 900px;
          background-color: #d04747;
          display: flow-root;
      }

      .l {
          float: left;
      }

      article {
          width: 400px;
          height: 300px;
          background-color: skyblue;
      }

      section {
          width: 400px;
          height: 600px;
          background-color: deeppink;
      }

      aside {
          float: right;
          width: 800px;
          height: 900px;
          background-color: #089a8c;
      }

      footer {
          height: 300px;
          background-color: #bfa;
      }

      .notice {
          /*固定定位*/
          position: fixed;
          right: 30px;
          bottom: 100px;
          width: 80px;
          height: 100px;
          background-color: orange;
      }
  </style>
</head>
<body>
<!-- header nav main section article aside footer-->
<header>header</header>
<nav class="w">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">前端开发</a></li>
    <li><a href="#">后端</a></li>
    <li><a href="#">NodeJS</a></li>
    <li><a href="#">GoLang</a></li>
    <li><a href="#">CPP</a></li>
  </ul>
</nav>
<main class="w">
  <div class="l">
    <article>article</article>
    <section>section</section>
  </div>
  <aside>aside</aside>
</main>
<footer>footer</footer>
<div class="notice">

</div>
</body>
</html>